<template>
<!-- 同收藏页面 -->
  <div class="rent-page">
     <van-nav-bar
  title="房屋管理"
  left-arrow
  @click-left="onClickLeft"
/>
<!-- 如果未发布房源 -->
<div class="empty-container" ref='show'>
  <img src="http://liufusong.top:8080/img/not-found.png">
  <p>您还没有房源，<a class="Rent_link__2yGRO" href="#/rent/add">去发布房源</a>吧~</p>
</div>

<!-- 如果发布了房源 -->
<van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"

>
<!-- 用封装好的商品列表 -->
<Item v-for='(item,index) in list' :key='index' :item='item'></Item>
</van-list>

  </div>
</template>

<script>
import Item from '@/components/Item.vue'
import { rentList } from '@/api/user'
export default {
  name: 'rent-page',
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      isShow: false

    }
  },
  components: {
    Item
  },
  methods: {
    // 左键头 返回上一页
    onClickLeft () {
      this.$router.back()
    },
    /* 列表加载事件 请求数据 */
    async onLoad () {
      const { body } = await rentList()
      console.log(body)
      // 后台请求的数据给到列表
      this.list = body
      // 如果列表有长度就显现
      if (this.list.length) {
        this.$refs.show.style.display = 'none'
      } else {
        console.log(1)
      }
      this.finished = true
    }

  }

}
</script>

<style>
.empty-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.empty-container img {
    width: 150px;
    margin: 30px

}
.Rent_link__2yGRO {
    color: #33be85;
}

</style>
